<template>

    <el-container>
        <el-header>
            <h1>LTX体检报告与健康管理系统</h1>
            <p>医生:{{ doctor.realName }}</p>
        </el-header>
        <el-container>
            <el-aside width="200px">

                <h4>体检用户查询</h4>
                <el-form label-width="auto" style="max-width: 600px">
                    <el-form-item label="手机号码">
                        <el-input v-model="users.userId" />
                    </el-form-item>
                    <el-form-item label="姓名">
                        <el-input v-model="users.realName" />
                    </el-form-item>
                    <el-form-item label="性别">
                        <el-radio-group v-model="users.sex">
                            <el-radio value="0" model-value="0">女</el-radio>
                            <el-radio value="1" model-value="1">男</el-radio>
                        </el-radio-group>
                    </el-form-item>

                    <el-form-item label="套餐类型">
                        <el-select v-model="users.smId" placeholder="请选择套餐类型">
                            <el-option v-for="(s, index) in setmealArr" :key="s.smId" :label="s.name" :value="s.smId" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="体检日期">
                        <el-col :span="22">
                            <el-date-picker v-model="users.orderDate" type="date" placeholder="请输入体检日期"
                                style="width: 100%" />
                        </el-col>
                    </el-form-item>
                    <el-form-item label="是否归档">
                        <el-radio-group v-model="users.state">
                            <el-radio value="1" model-value="1">未归档</el-radio>
                            <el-radio value="2" model-value="2">已归档</el-radio>
                        </el-radio-group>
                    </el-form-item>

                    <el-form-item>
                        <el-button type="primary" @click="onSubmit">查询</el-button>
                        <el-button type="warning" @click="reset">重置</el-button>
                    </el-form-item>
                </el-form>

            </el-aside>
            <el-main>
                <el-table :data="ordersList" border style="width: 100%">
                    <el-table-column fixed prop="orderId" label="预约编号" width="150">
                    </el-table-column>
                    <el-table-column fixed prop="userId" label="手机号码" width="150">
                    </el-table-column>
                    <el-table-column prop="realName" label="姓名" width="120">
                    </el-table-column>
                    <el-table-column prop="sex" label="性别" width="120">
                        <template #default="scope">
                            {{scope.row.sex==1?"男":"女"}}
                        </template>


                    </el-table-column>
                    <el-table-column prop="sname" label="体检套餐类型" width="120">
                        <!-- <template #default="scope">
                            {{scope.row.type==1?"男":"女"}}
                        </template> -->


                    </el-table-column>
                    <el-table-column prop="hname" label="体检医院" width="320">
                    </el-table-column>
                    <el-table-column prop="orderDate" label="体检日期" width="250">
                    </el-table-column>
                    <!-- <el-table-column fixed="right" label="操作" width="250">
                    <template slot-scope="scope">
                        <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
                    </template>
                    <el-button>查看体检报告</el-button>
                        </el-table-column> -->
                    <el-table-column fixed="right" label="操作" width="180">
                        <template #default="scope">
                            <el-button @click="handleClick(scope.row)" type="text" size="small">{{scope.row.state==1?"查看体检报告":"编辑体检报告"}}</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination background layout="prev, pager, next, total" :total="page.total" :page-size="page.pageSize" @current-change="handleCurrentChange">
                </el-pagination>
            </el-main>
        </el-container>
    </el-container>
</template>

<script>
import { getSessionStorage } from '@/common';
import { reactive, toRefs } from 'vue';
import axios from 'axios';
import router from '@/router';
import { useRouter } from 'vue-router';

export default {
    setup() {
        const router = useRouter();



        const state = reactive({
            doctor: getSessionStorage("jinandaxuedoctor"),
            users: {
                userId: "",
                realName: "",
                sex: "0",
                smId: "",
                orderDate: "",
               // status: "1",//是否归档
                pageNumber:1,
                pageSize:2,
                state:"1"//订单状态

            },
            setmealArr: [{ "smId": 4, "name": "女士-基础套餐" }, { "smId": 5, "name": "女士-肾病套餐" }, { "smId": 6, "name": "女士-肝病套餐" }],
            ordersList: [],
            page:{
                pageNumber:1,
                pageSize:2,
                total:20

            }
        })

        function loadOrderList(){
            axios
            .post("/api/ordersList",state.users)
            // .post("/api/ordersList",{state:1,sex:0,pageNumber:1,pageSize:2})
            //.post("/api/ordersList",{sex:1,pageNumber:1,pageSize:2})
            //.post("/api/ordersList",{sex:0})
            .then((response) => {
                // console.log(response.data.data)//pageInfo
                // console.log(response.data.desc)
                // console.log(response.data.status)
                state.ordersList=response.data.data.list;
                state.page.pageNumber=response.data.data.pageNum;
                state.page.pageSize=response.data.data.pageSize;
                state.page.total=response.data.data.total;
                
            })
            .catch(function(error){
                //请求失败处理
                console.log(error);
            });


        }


        loadOrderList();

        function onSubmit(){
            loadOrderList();
        }


        function handleCurrentChange(val){
            state.users.pageNumber=val;
            loadOrderList();

        }

        //编辑体检报告事件或者查看体检报告事件
        function handleClick(data){
            alert(data.orderId)
            //1.在跳转之前需要做一件事，针对未归档的订单要给它创建一个体检报告模板
            //axios异步请求：1.判断订单状态，未归档需要做这件事情，做之前要看看有没有报告模板，有就无需创建。

            //2.不管是编辑还是查看都要调换到订单详情页面
            router.push('/ordersContentView')

        }

        return {
            ...toRefs(state),
            loadOrderList,
            onSubmit,
            handleCurrentChange,
            handleClick,
        }
    }
}


</script>


<style scoped>
.el-header {
    background-color: #b3c0d1;
    color: var(--el-text-color-primary);
    text-align: center;
    line-height: 60px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #1c51a3;
}

.el-header h1 {
    font-size: 22px;
    font-weight: 700;
}

.el-header p {
    font-size: 16px;
}

.el-aside {
    width: 250px;
    height: 700px;
    background-color: #d3dce6;
    box-sizing: border-box;
    padding: 20px;
}

.el-aside h4 {
    color: #555;
    margin-bottom: 20px;
}

.el-main {
    background-color: #e9eef3;
}
</style>
<!-- 
<style scoped>
.el-header {
  background-color: #b3c0d1;
  color: var(--el-text-color-primary);
  text-align: center;
  line-height: 60px;

  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #1c51a3;
}

.el-header h1 {
  font-size: 22px;
  font-weight: 700;
}
.el-header p {
  font-size: 16px;
}

.el-aside {
  background-color: #d3dce6;
  box-sizing: border-box;
  padding: 20px;
}
.el-aside h4 {
  color: #555;
  margin-bottom: 20px;
}

.el-main {
  background-color: #e9eef3;
}
</style> -->


<!-- <style scoped>
.el-header {
    background-color: #B3C0D1;
    color: #333;
    text-align: center;
    line-height: 60px;
  }
  
  .el-aside {
    background-color: #D3DCE6;
    color: #333;
    text-align: center;
    line-height: 200px;
  }
  
  .el-main {
    background-color: #E9EEF3;
    color: #333;
    text-align: center;
    line-height: 160px;
  } 
  
  body > .el-container {
    margin-bottom: 40px;
  }
  
  .el-container:nth-child(5) .el-aside,
  .el-container:nth-child(6) .el-aside {
    line-height: 260px;
  }
  
  .el-container:nth-child(7) .el-aside {
    line-height: 320px;
  }

  /* .el-header {
  background-color: #1c51a3;
  color: #fff;
  height: 80px;
  padding: 0 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
} */

.el-header h1 {
  font-size: 24px;
  font-weight: 600;
  margin: 0;
}

/* .el-aside {
    width: 240px;
    height: 700px;
  background-color: #f5f7fa;
  padding: 20px;
  border-right: 1px solid #e6e6e6;
} */

/* .el-main {
  overflow-y: auto;
  height: 100%;
  padding: 20px;
  background-color: #fff;
} */

</style> -->